<template>
  <StepView />
  <ElDivider />
  <div class="container">
    <div v-if="step == 1">
      <TimeSlotView />
    </div>
    <div v-else-if="step == 2">
      <SeatSlotView />
    </div>
    <div v-else-if="step == 3">
      <StaffPickerView />
    </div>
    <div v-else-if="step == 4">
      <TaskAssignView />
    </div>
  </div>
</template>

<script setup>
import usePlanningStore from "@/stores/planningStore";

import TimeSlotView from "./TimeSlotView";
import SeatSlotView from "./SeatSlotView";
import StaffPickerView from "./StaffPickerView";
import TaskAssignView from "./TaskAssignView";

import StepView from "./StepView";

const planningStore = usePlanningStore();

const step = computed(() => planningStore.currentStep);

onMounted(() => {
  console.log("Planning mounted");
});
</script>
